<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--  第一步引入 vue.js -->
    <script src="js/vue.js"></script>
    <style>
        .r{
            background-color: red;
        }
    </style>
</head>
<body>

<div id="app">

    <kk>
        <h1 slot="header">头文件内容</h1>
        <p>asda</p>
        <p>ddsa</p>
        <h1 slot="footer">为文件内容</h1>
    </kk>

    <br>

<!--    v-slot 只能添加在 <template> 上 -->
    <kk>
        <template v-slot:header>
            <h1>头文件内容</h1>
        </template>

        <p>A paragraph for the main content.</p>
        <p>And another one.</p>

        <template v-slot:footer>
            <p>尾文件内容</p>
        </template>
    </kk>
</div>

<template id="login">
    <div>
        <header>
            <slot name="header"></slot>
        </header>
        <main>
            <slot></slot>
        </main>
        <footer>
            <slot name="footer"></slot>
        </footer>
    </div>

</template>

<script>

    var kk = {
        template: "#login"
    }

    var vm = new Vue({
        el: "#app",
        data: {
            msg: "欢迎走进 Vue的 入门学习 ，joker  欢迎你",
        },
        components: {
            kk
        }

    });


</script>

</body>
</html>